<template>
	<view class="total-price">
		<view class="btn-box" :class="{ active: showPriceMask }">
			<view class="left" @click="openMask">
				<text class="desc">总价</text>
				<text class="red">{{currency}}</text>
				<text class="red price">{{ priceInfo.total_price }}</text>
				<text class="icon-jiantou iconfont"></text>
			</view>
			<view class="right"><button class="btn" @click="saveOrder">提交订单</button></view>
		</view>

		<view class="global_mask price-mask" :class="{ active: showPriceMask }" @click="openMask">
			<view class="mask-content" @click.stop="preventClick">
				<view class="title-box"><text class="title">费用明细</text></view>
				<view class="list">
					<view class="line">
						<text class="txt">基础配送费</text>
						<text>{{currency}}{{ priceInfo.basic_distance_price }}</text>
					</view>
					<view class="line" v-if="priceInfo.extra_distance_price > 0">
						<text class="txt">超出距离费用</text>
						<text>{{currency}}{{ priceInfo.extra_distance_price }}</text>
					</view>
					<view class="line" v-if="priceInfo.basic_weight_price > 0">
						<text class="txt">基础重量费</text>
						<text>{{currency}}{{ priceInfo.basic_weight_price }}</text>
					</view>
					<view class="line" v-if="priceInfo.extra_weight_price > 0">
						<text class="txt">超出重量费用</text>
						<text>{{currency}}{{ priceInfo.extra_weight_price }}</text>
					</view>
					<view class="line" v-if="priceInfo.tip_price > 0">
						<text class="txt">小费</text>
						<text>{{currency}}{{ priceInfo.tip_price }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'TotalPrice',
	data() {
		return {
			showPriceMask: false
		};
	},
	props: ['priceInfo','currency'],
	methods: {
		openMask() {
			this.showPriceMask = !this.showPriceMask;
		},
		preventClick() {
			return false;
		},
		saveOrder() {
			this.$emit('saveOrder');
		}
	}
};
</script>

<style lang="stylus" scoped>
.total-price
	.btn-box
		position fixed
		bottom 0
		left 0
		right 0
		height 100upx
		display flex
		justify-content space-between
		align-items center
		background #fff
		box-shadow 0 -1px 2px 0 #f1f1f1
		&.active
			z-index 10
		.left
			font-size 13px
			flex-grow 1
			.desc
				padding 0 10px
				color #000
			.red
				color red
			.price
				font-size 18px
				margin-left 2px
			.icon
				color #aaa
		.right
			flex-grow 1
			height 100%
			font-size 0
			.btn
				width 100%
				height 100%
				line-height 100upx
				font-size 16px
				color #fff
				background #f60
				border-radius 0
	.price-mask
		.mask-content
			padding-bottom 60px
			.title-box
				font-size 15px
				text-align center
				padding 15px 10px
				border-bottom 1PX solid #e5e5e5
			.list
				.line
					font-size 14px
					padding 20px
					flexbox()
					justify-content space-between
					align-items center
					border-bottom 1PX dashed #ddd
					&:last-child
						border-bottom none
					.txt
						margin-right 5px
</style>
